<template>
  <div>
    <van-share-sheet
      v-model="visible"
      title="立即分享给好友"
      :options="options"
      get-container="body"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { ShareSheet as VanShareSheet, Toast } from 'vant'
export default {
  name: 'ShareSheet',
  components: {
    VanShareSheet
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // 要分享的地址
    url: {
      type: String
    },
    // 要分享的标题
    title: {
      type: String
    },
    // 要分享的图片地址
    pic: {
      type: String
    }
  },
  data () {
    return {
      visible: this.show,
      options: [
        {
          name: '微信',
          icon: require('@/assets/share_wechat.png'),
          share: false
        },
        {
          name: '朋友圈',
          icon: require('@/assets/share_discover.png'),
          share: false
        },
        {
          name: '微博',
          icon: require('@/assets/share_sina.png'),
          share: true
        },
        {
          name: 'QQ',
          icon: require('@/assets/share_qq.png'),
          share: true
        },
        {
          name: 'QQ空间',
          icon: require('@/assets/share_qzone.png'),
          share: true
        },
        {
          name: '复制链接',
          icon: require('@/assets/share_link.png'),
          share: false
        }
      ]
    }
  },
  watch: {
    show: {
      handler (newVal) {
        this.visible = newVal
      }
    },
    visible: {
      handler (newVal) {
        if (!newVal) {
          this.$emit('cancel', newVal)
        }
      }
    }
  },
  methods: {
    onSelect (option, index) {
      const { name, share } = option
      if (!share) {
        if (name !== '复制链接') {
          Toast('请使用微信打开，并点击右上角分享功能分享给好友')
        } else {
          // 复制链接
        }
      } else {
        let req = ''
        const url = encodeURIComponent(this.url)
        if (name === '微博') {
          req = `http://service.weibo.com/share/share.php?url=${url}&sharesource=weibo&title=${this.title}&pic=${this.pic}&appkey=`
        } else if (name === 'QQ') {
          req = `http://connect.qq.com/widget/shareqq/index.html?url=${url}&sharesource=qzone&title=${this.title}&pics=${this.pic}&summary=${this.title}&desc=${this.title}`
        } else if (name === 'QQ空间') {
          req = `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${this.title}&desc=${this.title}&summary=${this.title}&pics=${this.pic}`
        }
        window.open(req)
      }
      this.$emit('select', option, index)
    }
  }
}
</script>

<style>

</style>
